<template>
	<view class="">

		<view class="wrap">
			<view class="top"></view>
			<view class="content">
				<view class="title">
					快捷注册
					<text class="gui-text-small">{{scene}}</text>
					<text v-if="shareID" class="gui-text-small gui-color-green 
				gui-bg-green7 gui-padding-small gui-border-box  gui-border-radius-small">来自朋友的分享</text>
				</view>
				<view class="logo">
					<image src="/static/assets/images/logo/LOGO.jpg"
						style="width:120px;border-radius: 64rpx;will-change: transform;" mode="widthFix"></image>
				</view>
			</view>

			<!-- 注册协议 -->
			<u-popup :show="showDeclare" mode="center" :round="2">
				<view class="gui-padding" style="height:1200rpx;overflow-y: scroll;">
					<view class="gui-h2 gui-text-center">
						<text>小程序用户注册协议</text>
					</view>
					<view class="gui-margin-top">

					</view>
					<view class="gui-h3">
						<view class="gui-text">
							在使用本系统的所有功能之前，请您务必仔细阅读并透彻理解本声明。您可以选择不使用本系统，但如果您使用本系统，您的使用行为将被视为对本声明全部内容的认可。
						</view>
					</view>
					<view class="gui-h3">
						<view class="gui-h4">
							一、系统特色
						</view>
						<view class="gui-text">
							会员注册及注销：用户通过小程序注册成为会员，直接入驻。注销后将不在享受会员的所有优惠及权益。
						</view>
						<view class="gui-h4">
							二、关于隐私权
						</view>
						<view class="gui-text">
							访问者在本系统注册时提供的一些个人资料，本系统除您本人同意外不会将用户的任何资料以任何方式泄露给第三方。
							当政府部门、司法机关等依照法定程序要求本系统披露个人资料时，本系统将根据执法单位之要求或为公共安全之目的提供个人资料，在此情况下的披露，本系统不承担任何责任。
						</view>
						<view class="gui-h4">
							三、关于版权
						</view>
						<view class="gui-text">
							1、被本系统授权使用的单位，不应超越授权范围。<br />
							2、本系统提供的资料如与相关纸质文本不符，以纸质文本为准。<br />
							3、如因作品内容、版权和其它问题需要同本系统联系的，请在本系统发布该作品后的三日内进行。<br />
						</view>
						<view class="gui-h4">
							四、关于解释权
						</view>
						<view class="gui-text">
							本系统之声明以及其修改权、更新权及最终解释权均属本站以及达州水鸭子游泳馆所有。
						</view>
						<view class="gui-h4">
							五、会员权利与义务
						</view>

						<view class="gui-text">
							会员承诺遵守法律法规、社会主义制度、国家利益、公民合法权益、公共秩序、社会道德风尚和信息真实性等七条底线；
							会员在其名称、头像和简介等注册信息中不得出现违法和不良信息；系统将配备与服务规模相适应的专业人员，对会员提交的账号名称、头像和简介等注册信息进行审核，
							对含有违法和不良信息的，不予注册，对会员发布的违法信息，有权进行删除处理，多次出现违法行为的账号，达州水鸭子游泳馆有权删除账号，并不退还相关款项。
							系统保护用户信息及公民个人隐私，自觉接受社会监督，及时处理公众举报的账号名称、头像和简介等注册信息中的违法和不良信息。
							会员的所有行为必须符合国家法律的规定，如违反国家法律规定和本协议，出现任何纠纷及不良结果，将由行为人独立承担所有责任。
							本小程序上的信息本网站上关于系统会员或他们的产品（包括但不限于公司名称、联系人及联络信息，产品的描述和说明，相关图片、视讯等）的信息均由会员单位自行提供，
							会员依法应对其提供的任何信息承担全部责任。达州水鸭子游泳馆对此等信息的准确性、完整性、合法性或真实性均不承担任何责任。此外，达州水鸭子游泳馆对任何使用或提供本网站信息的商业活动及其风险不承担任何责任。
							未经合法权利人的书面许可，任何人严禁在本小程序展示产品图片。任何未经授权便在小程序上使用该图片都可能违反国际法，商标法，隐私权法，通讯、通信等法律法规。浏览者可以截图系统显示的资料。
						</view>
						<view class="gui-h4">
							六、免责申明
						</view>
						<view class="">
							<text class="gui-text">
								系统的各项电子服务的所有权和运作权归达州水鸭子游泳馆。
								提供的服务将完全按照其发布的章程、服务条款和操作规则严格执行。会员若完全同意所有服务条款，并完成注册程序，即可成为系统的正式会员。
								基于系统提供的网络服务的商业性和时效性：　会员对其发布的信息负责，应提供详尽、真实、准确的企业资料，
								不得发布不真实的、有歧义的信息，绝对禁止发布误导性的、恶意的消息。　随时更新注册资料，以符合及时、详尽、准确的要求。
								如果会员将帐号或密码丢失或被盗，应及时重新登记并重新设置密码。会员造成的帐号失密，应自行承担责任　
								会员发现系统发布的信息不准确或发生错误，以及其它错误行为，应及时通知本网。
								若问题未能及时解决，可进入本网的投诉程序。
								系统向会员提供的商品信息之编辑、编制、传播的版权和知识产权，全部由达州水鸭子游泳馆拥有；
								未经达州水鸭子游泳馆事先以书面表示同意，任何人不得以各种形式复制、散布、出售、出版、广播、转播该商品信息。
								达州水鸭子游泳馆如发现会员提供的资料包含有不正确或者违法的信息，将发出警告，并保留停止或终止其会员资格的权利。　
								会员如违反本协议而造成达州水鸭子游泳馆的经济损失，本网有权追究其经济责任与法律责任。
							</text>
						</view>

					</view>
				</view>
				<view class="gui-text gui-padding-x">
					<view class="gui-text">
						<view class="">
							<button type="default" @tap="registerAgree" :plain="true"
								class="gui-button gui-bg-primary gui-noborder">
								<text class="gui-color-white gui-button-text">同意</text>
							</button>
						</view>

						<view class="gui-margin-top">
							<button type="default" :plain="true" @tap="shutdown"
								class="gui-button gui-margin-top gui-bg-orange gui-noborder">
								<text class="gui-color-white gui-button-text">不同意</text>
							</button>
						</view>

					</view>
				</view>
			</u-popup>

			<view class="buttom">
				<view class="loginType">
					<view class="gui-flex gui-columns">
						<text class="gui-color-gray gui-text-center">微信手机号一键注册</text>
						<view class="gui-margin-top">

						</view>

						<button class="gui-button gui-bg-blue gui-noborder gui-border-radius-large"
							open-type="getUserInfo" @getuserinfo="callWechat">
							<text class="gui-color-white gui-button-text gui-icons">注册</text>
						</button>
						<view class="gui-margin-top">

						</view>
						<text class="gui-color-gray gui-text-center ">返回登录</text>
						<view class="gui-margin-top">

						</view>
						<button class="gui-button gui-bg-orange gui-noborder gui-border-radius-large" @tap="toLogin">
							<text class="gui-icons gui-block gui-color-white gui-text">返回登录</text>
						</button>
					</view>
				</view>

				<view class="hint">
					<!-- @hulu -->
					<view>
						<u-checkbox-group size="12" placement="column" @change="changeAgree" v-model="checkedArr">
							<label>
								<u-checkbox label="同意" size="14" name="tongyi" value="true"
									style="transform:scale(0.7)" />
							</label>
						</u-checkbox-group>
					</view>

					注册代表同意
					<text class="link" @tap="showPrivacy=true">用户协议、隐私政策，</text>
					并授权使用您的账号信息（如昵称、头像、地理位置信息，手机号）以便您统一管理
				</view>
			</view>

			<!-- 注册弹窗层 -->
			<gui-popup ref="guipopup1" style="width:1000rpx;">
				<view class="gui-padding-small gui-bg-white gui-border-radius-small">
					<view class="gui-padding">
						<view style="text-align: center;padding:20rpx 0;font-size: 44rpx;">
							请授权微信个人信息
						</view>
						<view class="gui-text">
							<view>为提供更完善的服务,请授权或完善个人信息，绑定手机号</view>
						</view>
						<form @submit="submit">
							<text class="gui-text-small gui-color-gray">昵称授权</text>
							<input id="nickname-input" type="nickname"
								class="gui-text gui-border-b gui-primary-border-color" @focus="inputNickname"
								name="nickName" v-model="userInfo.nickName" border="none" placeholder="请授权昵称" />
							<text class="gui-text-small gui-color-gray">头像授权</text>
							<view v-if="!hasAuthAvatar">
								<button class="gui-button gui-button-mini gui-bg-orange gui-noborder"
									open-type="chooseAvatar" style="width:66rpx;" @chooseavatar="chooseavatar">
									<text
										class="gui-block gui-color-white gui-button-text-mini gui-icons">&#xe626;</text>
								</button>
							</view>
							<view v-else>
								<input hidden v-model="userInfo.avatarUrl" name="avatarUrl" />
								<image :src="userInfo.avatarUrl" style="width:80rpx;will-change: transform;"
									mode="widthFix" class="authorization">
								</image>
							</view>

							<text class="gui-text-small gui-color-gray">手机号授权</text>
							<view v-if="!hasAuthMobile">
								<button class="gui-button gui-button-mini gui-bg-red gui-noborder" type="default"
									open-type="getPhoneNumber" style="width:66rpx;"
									@getphonenumber="getminiprogramcode">
									<text
										class="gui-block gui-color-white gui-button-text-mini gui-icons">&#xe60e;</text>
								</button>
							</view>
							<view v-else>
								<input type="mobile" v-model="userInfo.mobile"
									class="gui-text gui-border-b gui-primary-border-color" name="mobile" border="none"
									placeholder="请授权手机号" />
							</view>
							<view class="gui-margin-top-large" style="height:80rpx;">
								<text class="gui-color-red gui-text">{{error}}</text>
							</view>
							<view class="gui-margin-top-large">
								<button class="gui-button gui-bg-primary gui-noborder" type="default" formType="submit">
									<text class="gui-button-text-small gui-color-white">
										提交
									</text>
								</button>
							</view>
						</form>
					</view>
				</view>

			</gui-popup>
		</view>
		<!-- 隐私协议弹窗 -->


		<hulu-PrivacyPop ref="PrivacyPopck"></hulu-PrivacyPop>
	</view>
</template>

<script>
	import request from '@/utils/request'
	import graceJS from "@/Grace6/js/grace.js";
	import graceChecker from "@/Grace6/js/checker.js";
	import base from '@/utils/base'


	export default {
		data() {
			return {
				tel: '',
				hasAuthAvatar: false,
				hasAuthMobile: false,
				tmpAvatarUrl: '',
				error: "",
				shareID: null,
				showDeclare: false,
				contentHeight: 300,
				checkedArr: [],
				agreeRegist:false,
				userInfo: {
					pid: this.shareID,
					nickName: "",
					avatarUrl: "",
					miniprogramcode: "",
					mobile: "",
					openid: "",
					unionid: ""
				},
				PrivacyPopck: null,
				checked: false,
				options: {},
				scene: null,
				showPrivacy: false,
			}
		},
		async onLoad(options) {
			//分为2种情况，
			if (options.scene) {
				// 情况一、通过小程序码到达
				const scene = decodeURIComponent(options.scene)
				const id = scene.split("=")[1]
				this.shareID = id
				this.userInfo.pid = id
			} else {
				// 情况二、通过分享到达
				this.shareID = options.id
				this.userInfo.pid = options.id
			}
		},
		mounted() {
			this.$refs.PrivacyPopck.checkPrivacySetting();
			var agreeRec = graceJS.getStorage('agreeRec');
			// 用户没有同意过弹出协议框
			if (!agreeRec || agreeRec == '') {
				// 计算窗口高度，规划协议内容高度 = 窗口高度 * 0.65
				var systemInfo = graceJS.system();
				this.contentHeight = systemInfo.windowHeight * 0.65;
				// this.$refs.guimodal.open();
			}
		},
		methods: {
			handleAgreePrivacyAuthorization() {
				console.log("同意隐私协议")
				wx.getUserProfile()
				// wx.getPhonenumber()
			},
			changeAgree(e) {
				console.log("Change/agree,", e)
				if (e.length == 1 && e[0] == 'tongyi') {
					console.log("同意")
					this.showDeclare = true
					// this.$refs.guimodal.open();
				}
			},
			toLogin() {
				uni.navigateTo({
					url: '/subpage/user/login'
				})
			},
			registerAgree() {
				this.showDeclare = false
				this.agreeRegist = true
			},
			shutdown() {
				this.showDeclare = false
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			},
			async getminiprogramcode(e) {
				const code = e.detail.code
				if (code == null) {
					return uni.showToast({
						icon: "none",
						title: "请请授权手机号"
					})
				}
				const {
					phone
				} = await request.post("mini/phone", {
					code: code
				})
				this.userInfo.mobile = phone
				this.hasAuthMobile = true
			},
			inputNickname(e) {
				// 1
				uni.showLoading({
					title: '加载中'
				});
				uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)
					.select("#nickname-input")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						if (res[0].value == "") {
							return
						}
						//获取到当前用户的昵称,DOM查询结果为一个数组
						this.userInfo.nickName = res[0].value
					})
				uni.hideLoading();
			},
			async chooseavatar(e) {
				const baseUrl = base.host;
				const {
					data
				} = await request.upload(`${baseUrl}/api/upload`, e.detail.avatarUrl)
				if (data) {
					this.hasAuthAvatar = true
					this.userInfo.avatarUrl = baseUrl + "/upload/" + data
					console.log(this.userInfo.avatarUrl)
				}
			},
			async submit(e) {
				var rule = [{
						name: "nickName",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "昵称不为空"
					},
					{
						name: "avatarUrl",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "头像不为空"
					},
					{
						name: "mobile",
						checkType: "string",
						checkRule: "1,",
						errorMsg: "手机号不为空"
					},
				];
				//进行表单验证 e.detail.value 内存放着表单数据

				let formData = e.detail.value
				var checkRes = graceChecker.check(formData, rule);
				this.error = graceChecker.error
				console.log(graceChecker.error)
				if (checkRes) {
					formData['openid'] = this.userInfo.openid
					formData['unionid'] = this.userInfo.unionid
					// 分享id
					formData['pid'] = this.userInfo.pid
					const data = await request.post("mini/regist", formData)
					const token = data.data.token
					const user = data.data.user
					// 本地缓存token
					uni.setStorageSync("token", token)
					uni.setStorageSync("user", JSON.stringify(user))
					uni.reLaunch({
						url: `/pages/index/index`
					})
				}
			},
			callWechat() {
				if (this.agreeRegist == false) {
					uni.showToast({
						icon: "none",
						title: "请先阅读注册协议，并同意"
					})
					return;
				}

				/**
				 * 从基础库2.21.2开始，对步骤2中换取手机号信息的方式进行了安全升级，上述为新方式使用指南。
				 * （旧方式目前可以继续使用，但建议开发者使用新方式，以增强小程序安全性）另外，新方式不再需要提前调用wx.login进行登录。
				 */
				this.$refs.guipopup1.open();
				wx.login({
					success: async (res) => {
						if (res.code) {
							this.userInfo.miniprogramcode = res.code;
							let data = await request.post("mini/openid", {
								code: res.code
							})
							this.userInfo.openid = data.openid
							this.userInfo.unionid = data.unionid
							wx.getUserInfo({
								success: async (res) => {
									//获取到userinfo信息
									Object.assign(res.userInfo, {
										openid: data.openid,
									})
									console.log(res.userInfo)
									this.tmpAvatarUrl = res.userInfo.avatarUrl
								},
								complete() {}
							});
						} else {
							console.log('登录失败！' + res.errMsg);
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			.logo {
				display: flex;
				justify-content: center;
				text-align: center;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

		}

		.buttom {
			.loginType {
				display: flex;
				padding: 150rpx 150rpx 150rpx 150rpx;
				justify-content: center;
				align-items: center;
			}

			.hint {
				margin-top: 100rpx;
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: #909193;

				.link {
					color: #f9ae3d;
				}
			}
		}
	}

	.pop {
		width: 600rpx;
		padding: 16px;

		.auth_btn {
			box-shadow: none;
			background-color: #f1a532;
			color: white;
		}

		.auth_btn::after {
			border: none;
		}
	}

	.modal-btns {
		line-height: 100rpx;
		height: 100rpx;
		font-size: 35rpx;
		text-align: center;
		width: 320rpx;
	}
</style>